<template>
	<view class="content">
		<view class="store">
			<u-image width="100%" height="340" :src="imageUrl + data.mainPhoto"></u-image>
			<view class="name">
				{{data.name}}
			</view>
		</view>
		<u-gap></u-gap>
		<view class="form">
			<u-field label-width="0" v-model="integral" placeholder="请输入积分支付金额">
			</u-field>
			<u-field :border-bottom="false" password label-width="0" v-model="pass" placeholder="请输入支付密码">
			</u-field>
		</view>
		<u-gap></u-gap>
		<view class="balance">
			可使用积分：<text>{{balance}}</text>
		</view>

		<view class="btn" @click="submit">
			确认支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pass: '',
				integral: '',
				balance: 0,
				data: '',
				imageUrl: this.imageURL
			}
		},
		onLoad() {
			this.data = uni.getStorageSync('integralInfo')
			this.$u.get('userwallet/info').then(res => {
				this.balance = res.currentOutlineFee
			})
		},
		onUnload() {
			uni.removeStorageSync('integralInfo')
		},
		methods: {
			submit() {
				if (this.integral == '') {
					uni.showToast({
						title: '请输入积分支付余额',
						icon: 'none'
					});
					return
				}
				if (!/^[0-9]*$/.test(this.integral)) {
					uni.showToast({
						title: '请正确输入积分余额',
						icon: 'none'
					});
					return
				}
				if (this.pass == '') {
					uni.showToast({
						title: '请输入支付密码',
						icon: 'none'
					});
					return
				}
				if (this.balance < this.integral) {
					uni.showToast({
						title: '积分不足',
						icon: 'none'
					});
					return
				}
				this.$u.post('orderformintegralpay/pay', {
					storeId: this.data.code,
					orderPrice: this.integral,
					payPassword: this.pass
				}).then(res => {
					uni.showToast({
						title: '支付成功'
					});
					setTimeout(() => {
						this.$u.route({
							type: 'back'
						})
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.balance {
		font-size: 30rpx;

		text {
			color: #FF4D46;
		}
	}

	.btn {
		line-height: 100rpx;
		margin: 0 30rpx;
		margin-top: 190rpx;
		background: linear-gradient(90deg, #FF3768, #FC6161);
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		box-shadow: 0px 20rpx 30rpx 0px rgba(255, 60, 103, 0.35);
		border-radius: 20rpx;
	}

	.form {
		background-color: #fff;
		border-radius: 20rpx;
	}

	page {
		background-color: #f9f9f9;
	}

	.store {
		border-radius: 20rpx;
		overflow: hidden;

		.name {
			line-height: 100rpx;
			font-size: 36rpx;
			padding: 0 30rpx;
			font-weight: bold;
			background-color: #fff;
		}
	}

	.content {
		padding: 0 30rpx;
	}
</style>
